<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ="http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns=3D"http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="./style/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="JavaScript" charset="gb2312" src="./js/prototype.js"></script> 
    <script type="text/javascript" language="JavaScript" charset="gb2312" src="./js/getSelectData.js"></script> 
    <script type="text/javascript" language="JavaScript" charset="gb2312" src="./js/getPlugData.js"></script> 
    <title>逻辑分析仪选型网页</title>

</head>
<body  onload="GetData()">
    <div class="title">
        <br />&nbsp;逻辑分析仪选型网页
    </div>
    <div class="where">
        您当前所在位置: &gt;&gt; <a href="#">选型主页</a>
    </div><br />
    

    <table cellspacing="5" width="100%">
        <tr>
            <td valign="top" width="262px"><!-- style="background:#E7E7E7;" -->
                <table style="border:#c8d7e3 solid thin;outline:#00ff00 thick;" cellspacing="2" cellpadding="1" width="100%">
                    <tr><td onclick="GetData(),NaviStyle(this)">
                   
                            <p style="cursor:hand;" class="left_top"><b>产品列表</b></p>
                        </td>
                    </tr>
                    <tr>
                        <td onclick="treebr0(0)">
                     
                            <p style="cursor:hand" class="left_top"><b>过滤条件</b></p>
                       
                        </td>
                    </tr>
                    <tr id="d0" style="display:block;">
                        <td >
                            <div >
                                <ul id="clearAll" style="cursor: hand; float: right;" onclick="GetData()">
                                    <a style="font-size:12px;" href="#">全部清空</a></ul>
                                    
                                <h3><img id="img1" src="../images/item_white.ico" class="ico"/>请选择通道</h3>
                                
                                <ul id="channels"></ul>
                                
                                <h3><img id="img2" src="../images/item_white.ico" class="ico"/>请选择最大定时采样率(MHz)</h3>
                                <ul id="maxTimingRates"></ul>
                                
                                <h3><img id="img3" src="../images/item_white.ico" class="ico"/>请选择最大状态采样率(MHz)</h3>
                                <ul id="maxStateRates"></ul>
                                
                                <h3><img id="img4" src="../images/item_white.ico" class="ico"/>请选择存储深度/通道(bits)</h3>
                                <ul id="storDepths"></ul>
                                
                                <h3><img id="img5" src="../images/item_white.ico" class="ico"/>请选择分析插件</h3>
                                <ul id="clearPlugin" style="cursor: hand; float: right;" onclick="ClearCheckedPlugins(this)">
                                    <a style="font-size:12px;" href="#">清空插件</a></ul><br>
                                <ul id="plugins"></ul>
                                <!--<ul>
                                    <br />
                                    <span id="plugsTips"></span>
                                </ul>-->
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
            <td width="10px"></td>
            <td id="shareRegion" valign="top"  align="left">
                <div style="overflow: hidden;"> 
                <table id="option_tb" style="border:#c8d7e3 solid thin;outline:#00ff00 thick;" cellspacing="4" cellpadding="2" width="100%">
                    <tr align="center">
                        <td>
                    
                            <p id="count" class="left_top" style="border-bottom:1.5px solid #bcd;color:#ff0;">
                                产品列表:  </p>

                           <br />
                            <ul id="searchResult" >
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ul id="compare_btn">
                                <input type='button' style="height:25px;width:100px; margin:8px;overflow:auto;" value='比较' onclick="CompareLogic()" /></ul>
                            <h3 id="compare_back">
                            </h3>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h2 style="background: #4180b6; color: White;">
                                已选特性：</h2>
                            <ul id="selectedFilter" style='margin:8px;'>
                            </ul>
                        </td>
                    </tr>
                </table>
                </div>
            </td>
        </tr>
    </table>
  <!--<div id="test"></div>-->

<script type="text/javascript">
 
 var tableSort = function(){
  this.initialize.apply(this,arguments);
 }

 tableSort.prototype = {

     initialize: function(tableId, clickRow, startRow, endRow, classUp, classDown, selectClass) {

         this.Table = document.getElementById(tableId);
         this.rows = this.Table.rows; //所有行
         this.Tags = this.rows[clickRow - 1].cells; //标签td
         this.up = classUp;
         this.down = classDown;
         this.startRow = startRow;
         this.selectClass = selectClass;
         this.endRow = (endRow == 999 ? this.rows.length : endRow);
         this.T2Arr = this._td2Array(); //所有受影响的td的二维数组
         this.setShow();
     },
     //设置标签切换
     setShow: function() {
         var defaultClass = this.Tags[0].className;
         for (var Tag, i = 0; Tag = this.Tags[i]; i++) {
             Tag.index = i;
             addEventListener(Tag, 'click', Bind(Tag, statu));
         }
         var _this = this;
         var turn = 0;
         function statu() {
             for (var i = 0; i < _this.Tags.length; i++) {
                 _this.Tags[i].className = defaultClass;
             }
             if (turn == 0) {
                 addClass(this, _this.down);
                 _this.startArray(0, this.index);
                 turn = 1;
             } else {
                 addClass(this, _this.up);
                 _this.startArray(1, this.index);
                 turn = 0;
             }
         }
     },
     //设置选中列样式
     colClassSet: function(num, cla) {
         //得到关联到的td
         for (var i = (this.startRow - 1); i < (this.endRow); i++) {
             for (var n = 0; n < this.rows[i].cells.length; n++) {
                 removeClass(this.rows[i].cells[n], cla);
             }
             addClass(this.rows[i].cells[num], cla);
         }
     },
     //开始排序  num 根据第几列排序  aord 逆序还是顺序
     startArray: function(aord, num) {
         var afterSort = this.sortMethod(this.T2Arr, aord, num); //排序后的二维数组传到排序方法中去
         this.array2Td(num, afterSort); //输出
     },
     //将受影响的行和列转换成二维数组
     _td2Array: function() {
         var arr = [];
         for (var i = (this.startRow - 1), l = 0; i < (this.endRow); i++, l++) {
             arr[l] = [];
             for (var n = 0; n < this.rows[i].cells.length; n++) {
                 arr[l].push(this.rows[i].cells[n].innerHTML);
             }
         }
         return arr;
     },
     //根据排序后的二维数组来输出相应的行和列的 innerHTML 
     array2Td: function(num, arr) {
         this.colClassSet(num, this.selectClass);
         for (var i = (this.startRow - 1), l = 0; i < (this.endRow); i++, l++) {
             for (var n = 0; n < this.Tags.length; n++) {
                 this.rows[i].cells[n].innerHTML = arr[l][n];
             }
         }
     },
     //传进来一个二维数组，根据二维数组的子项中的w项排序，再返回排序后的二维数组
     sortMethod: function(arr, aord, w) {
         //var effectCol = this.getColByNum(whichCol);
         arr.sort(function(a, b) {
             x = killHTML(a[w]);
             y = killHTML(b[w]);
             x = x.replace(/,/g, '');
             y = y.replace(/,/g, '');
             switch (isNaN(x)) {
                 case false:
                     return Number(x) - Number(y);
                     break;
                 case true:
                     return x.localeCompare(y);
                     break;
             }
         });
         arr = aord == 0 ? arr : arr.reverse();
         return arr;
     }
 }
 /*-----------------------------------*/
 function addEventListener(o,type,fn){
  if(o.attachEvent){o.attachEvent('on'+type,fn)}
  else if(o.addEventListener){o.addEventListener(type,fn,false)}
  else{o['on'+type] = fn;}
 }
 
 function hasClass(element, className) { 
  var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); 
  return element.className.match(reg); 
 } 
  
 function addClass(element, className) { 
  if (!this.hasClass(element, className)) 
  { 
   element.className += " "+className; 
  } 
 } 
  
 function removeClass(element, className) { 
  if (hasClass(element, className)) { 
   var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); 
   element.className = element.className.replace(reg,' '); 
  } 
 } 
 
 var Bind = function(object, fun) {
  return function() {
   return fun.apply(object, arguments);
  }
 }
 //去掉所有的html标记
 function killHTML(str){
  return str.replace(/<[^>]+>/g,"");
 }
 //------------------------------------------------
 //tableid  第几行是标签行，从第几行开始排序，第几行结束排序(999表示最后) 升序标签样式，降序标签样式  选中列样式
 //注意标签行的class应该是一致的
 //var ex1 = new tableSort('tb',1,2,999,'up','down','hov');
</script>
 
</body>
</html>

